@tailwind base;
@tailwind components;
@tailwind utilities;

/* Zinc */
/* --background: 240 10% 3.9%; */
/* --muted: 240 3.7% 15.9%; */
@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;
		--primary: 240 5.9% 10%;
		--primary-foreground: 0 0% 98%;
		--secondary: 240 4.8% 95.9%;
		--secondary-foreground: 240 5.9% 10%;
		--muted: 240 4.8% 95.9%;
		--muted-foreground: 240 3.8% 46.1%;
		--accent: 240 4.8% 95.9%;
		--accent-foreground: 240 5.9% 10%;
		/* --destructive: 0 84.2% 60.2%; */
		--destructive: 2.74 92.59% 62.94%;
		--destructive-foreground: 0 0% 98%;
		--warning: 46.38 70.61% 48.04%;
		--warning-foreground: 120 12.5% 3.14%;
		--border: 240 5.9% 90%;
		--input: 240 5.9% 90%;
		--ring: 240 5.9% 10%;
		--radius: 6px;
		--danger: 2.74 92.59% 62.94%;
	}

	.dark {
		/* --background: 120 12.5% 3.14%; */
		--background: 0, 0%, 0%;
		--foreground: 0 0% 98%;
		--card: 240 10% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 240 10% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 240 5.9% 10%;
		--secondary: 240 3.7% 15.9%;
		--secondary-foreground: 0 0% 98%;
		/* --muted: 165 10% 7.84%; */
		/* --muted: 240 3.45% 11.37%; */
		--muted: 240 6% 10%;
		--muted-foreground: 240 5% 64.9%;
		--accent: 240 3.7% 15.9%;
		--accent-foreground: 0 0% 98%;
		/* --destructive: 0 62.8% 30.6%; */
		--destructive: 356.18 70.61% 48.04%;
		--destructive-foreground: 0 0% 98%;
		--warning: 46.38 70.61% 48.04%;
		--warning-foreground: 120 12.5% 3.14%;
		/* --border: 240 3.7% 15.9%; */
		--border: 240 2% 14%;
		--border-muted: 240 2% 14%;
		--input: 240 3.7% 15.9%;
		--ring: 240 4.9% 83.9%;
		--danger: 356.18 70.61% 48.04%;
	}
}

@layer base {
	* {
		@apply border-border;
	}
	html {
		font-family: var(--font-inter);
	}
	body {
		@apply bg-background text-foreground;
	}
}

::selection {
	color: hsl(var(--background));
	background: hsl(var(--foreground));
}

.google {
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E");
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

html {
	font-family: var(--font-inter);
}

.prose table {
	@apply w-full whitespace-normal;
}

@font-face {
	font-family: "Grotesk";
	src: url("/AlteHaasGroteskBold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/* Crisp Chat Widget Style Overrides */
#crisp-chatbox .cc-1d4mk.cc-8mq05 {
	background-color: black !important;
}

/* Additional selector for better specificity */
#crisp-chatbox [data-id="chat_opened"] .cc-1d4mk {
	background-color: black !important;
}

/* Target the chat bubble background */
.crisp-client .cc-1d4mk {
	background-color: black !important;
}
